<template>
  <div class="mod-config" style="font-size: 13px">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-date-picker v-model="datePicker" type="daterange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']" @change="selectDatePicker" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select  v-model="dataForm.chengyunshang" placeholder="承运商" clearable>
          <el-option value="江苏顺达" />
          <el-option value="湖南恒邦" />
          <el-option value="民航快递" />
        </el-select >
      </el-form-item>
      <el-form-item>
        <el-input  v-model="dataForm.yundanhao" placeholder="运单号" clearable></el-input >
      </el-form-item>
      <el-form-item>
        <el-input  v-model="dataForm.chengyunshangdanhao" placeholder="承运商单号" clearable></el-input >
      </el-form-item>
      <el-form-item>
        <el-select  v-model="dataForm.yundanzhuangtai" placeholder="运单状态" clearable>
          <el-option value="待发车" />
          <el-option value="已发车" />
          <el-option value="已到达" />
          <el-option value="已签收" />
          <el-option value="已回单" />
        </el-select >
      </el-form-item>

      <el-form-item>
        <el-select  v-model="dataForm.yichangleixing" placeholder="异常类型" clearable>
          <el-option value="运单接口未回传" label="1. 运单接口未回传"/>
          <el-option value="未查询到关联订单" label="2. 未查询到关联订单"/>
          <el-option value="出发事件未回传" label="3. 出发事件未回传"/>
          <el-option value="出发事件未处理或处理失败" label="4. 出发事件未处理或处理失败"/>
          <el-option value="到达事件未回传" label="5. 到达事件未回传"/>
          <el-option value="到达事件未处理或处理失败" label="6. 到达事件未处理或处理失败"/>
          <el-option value="签收事件没有回传" label="7. 签收事件没有回传"/>
          <el-option value="签收事件处理失败" label="8. 签收事件处理失败"/>
          <el-option value="运单状态异常" label="9. 运单状态异常"/>
        </el-select >
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;" height="700px">
      <el-table-column type="index" width="80px" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="shipmentNo" header-align="center" align="center" width="150"
                       label="运单号"></el-table-column>
      <el-table-column prop="orderNo" header-align="center" align="center" width="150" label="订单号"></el-table-column>
      <el-table-column prop="insertDate" header-align="center" align="center" width="200"
                       label="运单生成时间"></el-table-column>
      <el-table-column prop="carrierShipmentNo" header-align="center" align="center" width="150"
                       label="承运商单号"></el-table-column>
      <el-table-column prop="carrierName" header-align="center" align="center" width="150"
                       label="承运商名称"></el-table-column>
      <el-table-column prop="shipmentStatus" header-align="center" align="center" width="150"
                       label="运单状态"></el-table-column>
      <el-table-column prop="errorType" header-align="center" align="center" width="150"
                       label="异常类型"></el-table-column>
      <el-table-column prop="errorDetail" header-align="center" align="center" label="详情"></el-table-column>
<!--      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">加入白名单</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import AddOrUpdate from './tmserror-add-or-update'

export default {
  data() {
    return {
      dataForm: {
        key: '',
        startDate: '',
        yundanhao: '',
        endDate: '',
        chengyunshangdanhao: '',
      },
      datePicker: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {

  },
  created() {

  },
  methods: {
    // 获取数据列表
    getDataList: function () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/tms/errorReport'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': this.dataForm.startDate,
          'endDate': this.dataForm.endDate,
          'chengyunshang': this.dataForm.chengyunshang,
          'yundanhao': this.dataForm.yundanhao,
          'chengyunshangdanhao': this.dataForm.chengyunshangdanhao,
          'yundanzhuangtai': this.dataForm.yundanzhuangtai,
          'yichangleixing': this.dataForm.yichangleixing,
        })
      }).then(({data}) => {
        if (data && data.code === 10001) {
          this.dataList = data.data
        } else {
          this.dataList = []
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 日期选择器
    selectDatePicker(value) {
      console.log(value)
      this.dataForm.startDate = value[0]
      this.dataForm.endDate = value[1]
    },
    //补零
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length === 1) {
        m = "0" + month;
      }
      return m;
    },
    formatDate(date) {
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month < 10) {
        month = `0${month}`
      }
      if (day < 10) {
        day = `0${day}`
      }
      return (`${year}-${month}-${day}`)
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    getNowMonth() {
      var today = new Date();
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = "01"
      return tYear + "-" + tMonth + "-" + tDate;
    },
    // 上月日期
    getLastMonth() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      const lastMonthStartDate = this.formatDate(new Date(year, month - 1, 1))
      const lastMonthEndDate = this.formatDate(new Date(year, month, 0))
      const lastMonth = []
      lastMonth.push(lastMonthStartDate, lastMonthEndDate)
      return lastMonth
    }
  }
}
</script>
